<template>
  <div class="doctorDetail">
    <el-button size="small" class="goBack" @click="goBack">返回</el-button>
    <div class="baseInfo">
      <h1>权限分配</h1>
      <el-row>
        <el-col :span="12">
          <div class="grid-content">
            <label for="">管理姓名</label>
            <el-input v-model="admin_name" :disabled="true"></el-input>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content">
            <label for="">管理账户</label>
            <el-input v-model="admin_id" :disabled="true"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="grid-content">
            <label for="">管理医院</label>
            <el-select v-model="h_id" placeholder="请选择">
              <el-option
                v-for="item in hospitalList"
                :key="item.hi_id"
                :label="item.hi_name"
                :value="item.hi_id"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <!--                <el-col :span="12">-->
        <!--                    <div class="grid-content">-->
        <!--                        <label for="">医生电话</label>-->
        <!--                        <el-input v-model="doc_phone" maxlength="50"></el-input>-->
        <!--                    </div>-->
        <!--                </el-col>-->
      </el-row>
    </div>

    <div class="btn-group">
      <el-button type="primary" size="small" @click="update">修改</el-button>
      <el-button size="small" @click="fail">放弃</el-button>
    </div>
    <div class="popup">
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>是否确定放弃本次操作？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">我再想想</el-button>
          <el-button type="primary" @click="giveup">确定放弃</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { loginCheck } from "../../../../../drugstore/client/src/api/login";
import { authorityListGet, authorityUpdate } from "../../api/authority";
import { hospitalSelect } from "../../api/hospital";

export default {
  name: "detail",
  data() {
    return {
      h_id: "",
      admin_name: "",
      admin_id: "",
      hospitalList: [],
      dialogVisible: false,
      hospitalSelectList: {
        // 10000:'超管',
        // 10001:'测试医院一',
        // 10002:'测试医院二',
        // 10003:'测试医院三'
      },
    };
  },

  created() {
    this.backShow(this.$route.query.id);
  },

  mounted() {},

  methods: {
    async backShow(id) {
      try {
        let hospitalList = await hospitalSelect({
          pageIndex: 1,
          pageSize: 1000,
        });
        this.hospitalList = hospitalList.list;
        hospitalList.list.map((item) => {
          this.hospitalSelectList[item.hi_id] = item.hi_name;
        });
        let { list } = await authorityListGet({
          pageIndex: 1,
          pageSize: 1,
          admin_id: id,
        });
        console.log(list);
        this.admin_id = list[0].admin_id;
        this.admin_name = list[0].admin_name;
        this.h_id = this.hospitalSelectList[list[0].h_id];
      } catch (e) {
        console.error(e);
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    async update() {
      try {
        let res = await authorityUpdate({
          admin_id: this.admin_id,
          h_id: this.h_id,
        });
        if (res) {
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.push({
              path: "/authorityManage",
            });
          }, 100);
        }
        console.log(res);
      } catch (e) {
        console.error(e);
      }
    },
    fail() {
      this.dialogVisible = true;
    },
    giveup() {
      this.dialogVisible = false;
      this.$router.push({
        path: "/authorityManage",
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.doctorDetail {
  padding: 0 20px 20px 20px;

  .baseInfo {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding-bottom: 10px;
    margin: 20px 0 0 0;
    color: #2c3e50;
    font-weight: bold;

    & > h1 {
      padding: 0 20px;
      line-height: 50px;
      font-size: 16px;
      font-weight: bolder;
      border-bottom: 1px solid #e8eaec;
    }

    .el-row {
      width: 100%;
      margin: 15px 0;
      display: flex;
      padding: 0 20px 0 0;

      .el-col {
        .grid-content {
          display: flex;
          align-items: center;

          label {
            display: inline-block;
            flex: 0 0 70px;
            padding-left: 12px;
            padding-right: 8px;
            width: 70px;
          }

          .icon-uploader {
            width: 80px;
            height: 80px;
            border: 1px dashed #ccc;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-align: center;

            .el-upload {
              width: 80px;
              height: 80px;

              img {
                width: 80px;
                height: 80px;
              }
            }
          }

          .icon-uploader:hover {
            border: 1px dashed #409eff;
          }

          .icon-uploader:hover span {
            color: #409eff;
          }

          span {
            color: #ccc;
            display: block;
            font-size: 12px;
            line-height: 80px;
          }

          .pic-uploader {
            width: 176px;
            height: 80px;
            border: 1px dashed #ccc;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-align: center;

            .el-upload {
              width: 176px;
              height: 80px;

              img {
                width: 176px;
                height: 80px;
              }
            }
          }

          .pic-uploader:hover {
            border: 1px dashed #409eff;
          }

          .pic-uploader:hover span {
            color: #409eff;
          }

          span {
            color: #ccc;
            display: block;
            font-size: 12px;
            line-height: 80px;
          }
        }
      }
    }
  }

  .btn-group {
    margin-top: 20px;
    text-align: right;
  }
}
</style>